<template>
    <teleport to="#message">
        <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
            :class="classObject" v-if="isVisible">
            <span>{{ message }}</span>
        </div>
    </teleport>
</template>
<script setup lang="ts">
//是成功信息还是失败的信息(type)，信息的内容(text)
import { defineProps,PropType,ref} from 'vue';
export type MessageType = 'success'|'error'|'default'
const props = defineProps({
    message:String,
    type:{
        type:String as PropType<MessageType>,
        default:'default'
    }
})
const isVisible = ref(true)
const classObject = {
    'alert-success': props.type  == 'success',
    'alert-danger' : props.type == 'error',
    'alert-primary': props.type == 'default'
}

</script>
<style>

</style>